<template>
    <div class="w-full h-full overflow-y-scroll p-6">
        <h1 class="text-4xl font-bold mb-4">Discovery</h1>
        <div class="h-52 grid grid-cols-12 gap-4 overflow-y-scroll">
            <div v-for="item in cates" :key="item.category" class="col-span-2">
                <span @click="() => { getPlaylist(item.name) }"
                    class="cursor-pointer block bg-gray-200 hover:bg-gray-300 p-2 rounded-md transition">{{ item.name
                    }}</span>
            </div>
        </div>
        <div v-if="tracks" class="mt-8">
            <el-table :data="tracks" max-height="400" class="w-full">
                <el-table-column label="歌曲">
                    <template #default="scope">
                        <div class="flex items-center">
                            <el-avatar :src="scope.row.al.picUrl" alt="" class="mr-2" />
                            <div class="mt-2">{{ scope.row.al.name }}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <div class="flex">
                            <el-button @click="() => { play(scope.row, scope.$index) }" type="text" size="small"
                                class="text-blue-500 hover:underline mr-2">播放</el-button>
                            <el-button @click="() => { addPlayList(scope.row, scope.$index) }" type="text" size="small"
                                class="text-green-500 hover:underline">添加到歌单</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { getAllPalylists, getPlaylistDetail, getPlaylistDetailById, getMusicUrl, addToPlaylist } from '../boot/requests'
import { useAudioPlayListStore } from '../stores/counter'
import { ElMessage } from 'element-plus';
const cates = ref([])
const playList = ref([])
const tracks = ref([])
const details = ref([])
const audioPlay = useAudioPlayListStore()
const username = localStorage.getItem('username')
const user_id = localStorage.getItem('userId')
getAllPalylists().then(res => {
    let data = res.data
    cates.value = data.sub//.slice(0, 10)  // 获取歌单分类
})

const getPlaylist = (cate) => {
    getPlaylistDetail(cate).then(res => {
        let data = res.data
        playList.value = data.playlists[0]
    }).then(() => {
        getPlaylistDetailById(playList.value.id).then(res => {
            let data = res.data
            console.log(data)
            tracks.value = data.playlist.tracks
            details.value = data.privileges
            console.log("======", details.value)
            console.log(tracks.value)
        })
    })
}

const play = (row, index) => {
    console.log(tracks.value)
    let id = details.value[index].id
    console.log(id)
    getMusicUrl(id).then(res => {
        let data = res.data
        if (data.code === 200) {
            let track = {
                name: row.name,
                url: data.data[0].url,
                song_id: id,
            }
            console.log(track)
            audioPlay.setAudioPlayList([track])
            console.log(audioPlay.audioPlayList)
        }
    })
    // setAudioPlayList([track])
}

const addPlayList = (row, index) => {
    let song_id = details.value[index].id

    getMusicUrl(song_id).then(res => {
        let data = res.data
        if (data.code === 200) {
            var url = data.data[0].url
        }
        let payload = {
            user_id: user_id,
            song_id: song_id,
            song_name: row.name,
            song_pic: row.al.picUrl,
            song_url: url
        }
        addToPlaylist(payload).then(res => {
            let data = res.data
            if (data.code === 200) {
                ElMessage.success('添加成功')
            }
            else {
                ElMessage.error("添加失败")
            }
        })

    })

}

</script>

<style scoped></style>